<template>
    <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>商品信息</el-breadcrumb-item>
          <el-breadcrumb-item>品牌管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table
            :data="brands"
            border
            style="width: 100%; margin-top: 15px;">
          <el-table-column
            prop="paramId"
            label="ID">
          </el-table-column>
          <el-table-column
            prop="brandName"
            label="品牌">
          </el-table-column>
          <el-table-column
            prop="productPlace"
            label="产地">            
          </el-table-column>
           <el-table-column
            prop="factoryName"
            label="工厂名称">
          </el-table-column>
          <el-table-column
            prop="factoryAddress"
            label="工厂地址">
          </el-table-column>           
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: center;">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="goto"
          :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
import http from '@/core/httpRequest.js'
export default {
    data() {
        return {
            brands: [],
            total: 0
        };
    },

    mounted() {
        this.goto(1)
    },

    methods: {
        goto(page) {
      http.get(`/brand?page=${page}`).then(res => {
          this.brands = res.data.data.brands
          this.total = res.data.data.total
      })
    }
    },
};
</script>

<style lang="scss" scoped>
</style>